<template>
  <div class="tab-bar-box">
    <div class="tab-nav-scroll" ref="navScrollRef">
      <div class="tab-nav flex">
        <ul class="tab-nav-content flex1">
          <li
            v-for="(item, index) in tabNavList"
            :key="index"
            :class="['tab-nav-item',!disable && 'tab-nav-item2', activeName == item.name && 'tab-nav-item-select']"
            @click="changeTab(item, $event)"
          >
            <span v-if="item.text">{{ item.text }}</span>
            <render v-if="item.renderFun" :renderFn="item.renderFun"></render>
          </li>
        </ul>
        <slot name="tab-nav-right"></slot>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>

import render from '@/components/TabBar/render'

export default {
  name: 'TabBar',
  components: {render},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // v-model
    value: {
      type: [String,Number],
      default: ''
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabNavList: [],
      activeName: this.value
    }
  },
  watch: {
    activeName(val) {

    },
    value(val) {
      this.activeName = val
    }
  },
  methods: {
    // 设置tab点击栏
    setTabBar(tabsPaneInstance) {
      // tab的描述信息可以是字符串也可以是render函数
      const label = tabsPaneInstance.label,
        type = typeof label
      // 添加到数组项中，根据添加条件渲染
      this.tabNavList.push({
        text: type == 'function' ? '' : label,
        renderFun: type == 'function' ? label : '',
        name: tabsPaneInstance.name
      })
    },
    removeTabBar(tabsPaneInstance) {
      let obj = this.tabNavList.find(item => {
        return item.name == tabsPaneInstance.name
      })
      if (obj) {
        let index = this.tabNavList.indexOf(obj)
        this.tabNavList.splice(index, 1)
      }
    },
    changeTab(item, event) {
      if (this.disable) return
      // 如果选择的和当前激活的不同
      if (item.name != this.activeName) {
        this.activeName = item.name
        this.$emit('change', this.activeName)
        this.$emit('tab-click', item, event)
        // 计算当前按钮的位置，看是否需要移动
        const spanLeft = event.clientX // 当前点击的元素左边距离
        const divBox = document.querySelector('.tab-nav-item-select').clientWidth / 2 // 点击的元素一半宽度
        const totalWidths = document.body.clientWidth // 屏幕总宽度
        const widths = totalWidths / 2 // 一半的屏幕宽度
        const spanRight = totalWidths - spanLeft // 元素的右边距离
        const scrollBox = document.querySelector('.tab-nav-scroll') // 获取最外层的元素
        const scrollL = scrollBox.scrollLeft // 滚动条滚动的距离
        // 当元素左边距离 或者 右边距离小于100时进行滑动
        if (spanRight < 100 || spanLeft < 100) {
          scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tab-bar-box {
  .tab-nav-scroll {
    overflow-x: auto;
    -WEBkit-overflow-scrolling: touch;

    .tab-nav-content {
      display: flex;
      align-items: center;

      .tab-nav-item2 {
        &:hover {
          &:before {
            transform: scale(1, 1);
          }
        }
      }

      .tab-nav-item {
        position: relative;
        padding-bottom: 16px;
        margin-right: 40px;
        color: #333333;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        flex-shrink: 0;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        box-sizing: border-box;



        &:before {
          content: "";
          position: absolute;
          bottom: -3px;
          left: 0;
          right: 0;
          height: 3px;
          background-color: #3184FF;
          transform: scale(0, 1);
          transition: all 0.3s ease-in-out;
        }
      }

      .tab-nav-item-select {
        color: #3184FF;
        border-bottom: 3px solid #3184FF;
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0.01rem;
    opacity: 0;
    display: none;
  }

  ::-webkit-scrollbar-track {
    background-color: #fff;
    opacity: 0;
  }

  ::-webkit-scrollbar-thumb {
    width: 0.01rem;
    opacity: 0;
  }
}

</style>
